<template>
  <div class="app-container calendar-list-container" >
    <div className="sub-navbar published" v-if="isEdit" >
      <el-button style="margin-left: 10px;" type="success" @click="addNew">新增公告</el-button>
    </div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%" class="body-w">
      <el-table-column label="标题" prop="title">
        <template slot-scope="scope">
          <span v-if="scope.row.isTop" class="setTopIcon" title="全局置顶">置顶</span><span>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="creationTime" width="200" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.creationTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="查看详情" width="200px" >
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)" size="mini" >
            {{ isEdit?'编辑公告':'公告详情'}}
          </el-button>
          <el-button type="text" @click="handleDelete(scope.row)" v-show="isEdit" size="mini" >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" style="margin-right:20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="q.startPage" :page-sizes="[10,20,30, 50]" :page-size="q.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="showdialog" :title="isEdit?'编辑公告':'公告详情'">
      <edit-noice :isEdit="isEdit" :noice="noice" @createPublishSuccessed="createPublishSuccessed" ></edit-noice>
    </el-dialog>
  </div>
</template>

<style>
  .setTopIcon {
    padding: 0 8px 1px;
    margin: 0px 3px;
    background: #f35b4f;
    margin-left: 6px;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    height: 19px;
    line-height: 19px;
    vertical-align: middle;
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
}
</style>

<script>
import { GetPageList, DeleteNotice } from '@/api/notice'
import editNoice from './editNoice'

export default {
  name: 'noticeList',
  components: {
    editNoice
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      q: {
        startPage: 1,
        pageCount: 30
      },
      total: 0,
      list: [],
      noice: {},
      showdialog: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      var _this = this
      GetPageList(_this.q).then(result => {
        _this.list = result.data.items
        _this.total = result.data.totalCount
      })
    },
    handleSizeChange(val) {
      this.q.pageCount = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.q.startPage = val
      this.getList()
    },
    handleDetail(obj) {
      this.noice = obj
      this.showdialog = true
    },
    handleDelete(obj) {
      var _this = this
      _this.$confirm('是否确认删除该记录?', '提示', {
        // confirmButtonText: '确定',
        // cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteNotice({ id: obj.id }).then(() => {
          _this.getList()
        })
      })
    },
    addNew() {
      this.noice = {}
      this.showdialog = true
    },
    createPublishSuccessed() {
      this.showdialog = false
      this.getList()
    }
  }
}
</script>
